<script setup lang="ts">
import { getCertificationApi } from "#/api/lesson/tenant"
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()

const loading = ref(false)
const certList = ref<any>({})

const getCertList = () => {
    loading.value = true
    getCertificationApi({}).then(res => {
      const { data } = res
      certList.value = data
    }).finally(() => {
      loading.value = false
    })
}

const handleCert = (item: any) => {
  router.push({
    path: `/lesson/home/${item.id}`
  })
}

onMounted(() => {
  getCertList()
})
</script>
<template>
  <div v-loading="loading" class="h-full w-[100%] p-[20px]">
    <div class="container grid grid-cols-4 gap-4">
      <div @click="handleCert(item)" class="bg-[#eee] p-4 rounded-md cursor-pointer hover:shadow-md transition-all duration-300" v-for="item in certList" :key="item.id">
        <div class="text-[16px]">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>

</style>
